---
title: Number Ticker
date: 2023-11-18
description: Animate numbers to count up or down to a target number
author: dillionverma
published: true
video: https://cdn.magicui.design/number-ticker.mp4
---

<ComponentPreview name="number-ticker-demo" />

## Installation

<Tabs defaultValue="cli">

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @magicui/number-ticker
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="number-ticker" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</Tabs>

## Example

### Decimal

<ComponentPreview name="number-ticker-decimal-demo" />

### Start Value

<ComponentPreview name="number-ticker-demo-2" />

### Usage

```tsx showLineNumbers
import { NumberTicker } from "@/components/ui/number-ticker"
```

```tsx showLineNumbers
<NumberTicker value={100} />
```

## Props

| Prop            | Type         | Default | Description                          |
| --------------- | ------------ | ------- | ------------------------------------ |
| `value`         | `int`        | `0`     | The value to count to                |
| `direction`     | `up \| down` | `"up"`  | The direction to count in            |
| `delay`         | `number`     | `0`     | The delay before counting            |
| `decimalPlaces` | `number`     | `0`     | The number of decimal places to show |
| `startValue`    | `number`     | `0`     | The value to start counting from     |
